<template>
    <div class="home">
        <h1>{{$route.meta.title}}</h1>
        <el-row :gutter="20">
            <el-col :xs="24" :sm="8">
                <el-card shadow="hover">
                    <h1>{{userCount}}</h1>
                    <p>用户总数</p>
                </el-card>
            </el-col>
            <el-col :xs="24" :sm="8">
                <el-card shadow="hover">
                    <h1>{{productCount}}</h1>
                    <p>商品总数</p>
                </el-card>
            </el-col>
            <el-col :xs="24" :sm="8">
                <el-card shadow="hover">
                    <h1>{{orderCount}}</h1>
                    <p>订单总数</p>
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import { homePage } from "@/utils/api";
export default {
    name: "Home",
    data() {
        return {
            orderCount: "",
            productCount: "",
            userCount: "",
        };
    },
    created() {
        homePage().then((res) => {
            this.orderCount = res.data.data.orderCount;
            this.productCount = res.data.data.productCount;
            this.userCount = res.data.data.userCount;
        });
    },
};
</script>
<style lang="scss" scoped>
h1 {
    font-weight: normal;
    
}
.home {
    .el-row {
        padding: 0 20px;
        /deep/ {
            .el-col:nth-child(1) {
                .el-card__body {
                    background-color: #f0ad4e;
                }
            }
            .el-col:nth-child(2) {
                .el-card__body {
                    background-color: #5cb85c;
                }
            }
            .el-col:nth-child(3) {
                .el-card__body {
                    background-color: #4cb1cf;
                }
            }
            .el-card__body {
                height: 100px;
                text-align: center;
                p{
                    font-size: 14px;
                }
                h1{
                    font-size: 50px;
                    margin: 0;
                }
            }
            .el-card:hover{
                color: white !important;
                transform: scale(1.05);
            }
        }
    }
}
</style>
